<template>
	<view>
		<view class="order-header">
			<view class="order-header-filter">
				<view class="layout">
					<view class="order-header-backend" @click="handleOrderButton()">
						<image src="/static/icon/icon-back.png"></image>
					</view>
					<view class="order-header-tooltip">
						完成
					</view>
					<view class="order-header-button">
						<image src="/static/icon/icon-share.png"></image>
					</view>
					<view class="order-header-more">
						<image src="/static/icon/icon-moer.png"></image>
					</view>
				</view>				
			</view>
		</view>
		<view class="order-form">
			<view class="order-form-box">
				<view class="order-form-box-store">{{orderData.shopping.storeName}}</view>
				<view class="order-form-box-shopping">
					<view class="layout">						
						<view class="order-form-box-shopping-icon">
							<image :src="orderData.shopping.prodLogo"></image>
						</view>
						<view class="order-form-box-shopping-text">
							<view class="order-form-box-shopping-text-basic">{{orderData.shopping.prodName}}</view>
							<view class="order-form-box-shopping-text-custom">数量 x{{orderData.shopping.quantity}},3层 120抽 24包【234234234】</view>
						</view>
						<view class="order-form-box-shopping-price">
							<view>到手￥{{orderData.orderAmount}}</view>
							<view>￥{{orderData.orderAmount}}</view>
						</view>
					</view>
				</view>
				<view class="order-form-box-button">		
					<view class="order-form-box-button-item">申请售后</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">实付款</view>
					<view class="order-form-group-volume">
						<view class="layout">							
							<view>共减：￥{{orderData.discountAmount}} </view>
							合计{{orderData.orderAmount}}
						</view>
					</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">订单编号</view>
					<view class="order-form-group-volume">{{orderData.orderCode}}</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">交易快照</view>
					<view class="order-form-group-volume">{{orderData.price}}</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">支付方式</view>
					<view class="order-form-group-volume">{{orderData.orderPaymentType.label}}</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">支付时间</view>
					<view class="order-form-group-volume">{{orderData.orderPayTime}}</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">下单时间</view>
					<view class="order-form-group-volume">{{orderData.orderInputTime}}</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">配送方式</view>
					<view class="order-form-group-volume">{{orderData.orderShippingType.label}}</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">收货信息</view>
					<view class="order-form-group-volume">{{orderData.orderTelephone}}{{orderData.orderFullName}}</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">收货地址</view>
					<view class="order-form-group-volume">{{orderData.orderReceiveAddress}}</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">期望配送时间</view>
					<view class="order-form-group-volume">{{orderData.orderDeliveryTime}}</view>
				</view>
			</view>
			<view class="order-form-group">
				<view class="layout">
					<view class="order-form-group-tooltip">收货方式</view>
					<view class="order-form-group-volume">{{orderData.orderDeliveryType.label}}</view>
				</view>
			</view>
		</view>
		<view class="order-form">
			<view class="order-form-header">快速解决问题</view>
			<view class="order-form-box layout">
				<view>店铺客服</view>
				<view>京东客服</view>
			</view>
		</view>
		<view class="order-form">
			<view class="order-form-header">服务中心</view>
		</view>
		<view class="order-bottom">	
			<view class="order-bottom-button" @click="handleDeliveyButton()">查看物流</view>
			<view class="order-bottom-button">退换/售后</view>
			<view class="order-bottom-button">再次购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:"loaded",
				orderTotal:0,
				orderData:{
					orderCode:299203798744,
					orderAmount:"137.98",
					discountAmount:"10.02",
					orderInputTime:"2024-11-08 11:25:30",
					orderPayTime:"2024-11-08 11:25:45",
					orderDeliveryTime:"2024-11-15 09:00-21:00",
					orderTelephone:"13883095702",
					orderFullName:"简启敏",
					orderReceiveAddress:"重庆南岸区长生桥镇同景国际城S组团3栋5楼1号",
					shopping:{
						prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
						storeName:"洁柔京东自营官方旗舰店",
						quantity:1,
						prodLogo:"https://exueshi-new-oss.oss-cn-hangzhou.aliyuncs.com/temp/202405/14/b7028f4ddbdd5c6633875edbefe3c6c0.jpg"
					},
					orderPaymentType:{
						label:"银行卡支付"
					},
					orderShippingType:{
						label:"京东快递"
					},
					orderDeliveryType:{
						label:"送货上门"
					}
				}
			}
		},
		onLoad(option) {
			this.orderID = option.orderID
			this.refreshOrderDetail()
		},
		methods: {
			handleDeliveyButton:function(){
				uni.redirectTo({
					url:"/pages/home/order-delivery/order-delivery?orderID="+this.orderID
				})
			},
			handleOrderButton:function(){
				uni.redirectTo({
					url:"/pages/home/order/order"
				})
			},
			refreshOrderDetail:function(){
				this.$transaction.getOrderDetail({
					"orderID":this.orderID
				}).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style>
page { background: #ededed; padding-top: 100rpx; }

.order-header { position: fixed; top:var(--status-bar-height); left: 0; right: 0; padding-top: 25rpx; background: #ededed; z-index: 100; }
.order-header-backend { width: 30rpx; height: 30rpx; padding: 0 25rpx; padding-top: 10rpx;}
.order-header-tooltip {  color: #000; width: 500rpx; border-radius: 25rpx; height: 40rpx; line-height: 40rpx; padding: 5rpx 15rpx; text-align: center; font-size: 18px; font-weight: bold; }
.order-header-button { width: 30rpx; height: 30rpx; padding-top: 10rpx; padding-left: 20rpx; padding-right: 25rpx; text-align: center; font-size: 12px; }
.order-header-more { width: 30rpx; height: 30rpx; padding-top: 10rpx;}

.order-menu-item { padding: 30rpx 25rpx; font-size: 14px; background: #ededed; z-index: 99; }
.order-menu-active { font-weight: bold; color: #f30; }

.order-form {  background: #fff; width: 700rpx; margin: 0 auto; border-radius: 15rpx; margin-bottom: 25rpx; }

.order-form-box-store { padding: 15rpx 0; font-size: 14px; font-weight: bold; }
.order-form-box-shopping {}
.order-form-box-shopping-icon { width: 150rpx; height: 150rpx; padding-right: 15rpx; }
.order-form-box-shopping-text { width: 385rpx; font-size: 12px; padding-top: 15rpx;}
.order-form-box-shopping-text-basic { font-weight: bold; height: 25rpx; line-height: 25rpx; overflow: hidden;}
.order-form-box-shopping-text-custom { padding-top: 15rpx;  height: 25rpx; line-height: 25rpx; overflow: hidden; color: #999;}
.order-form-box-shopping-price { width: 100rpx; font-size: 12px; }

.order-form-box-button { padding-top: 15rpx; display: flex; justify-content: flex-end; }
.order-form-box-button-item { font-size: 12px; padding: 5rpx 15rpx; border: #999 1px solid; text-align: center; border-radius: 25rpx; } 

.order-form-group { }
.order-form-group-tooltip { width: 200rpx; font-size: 14px; color: #666; padding: 15rpx 25rpx;}
.order-form-group-volume { width: 500rpx; font-size: 14px; color: #333; padding: 15rpx 25rpx; text-align: right;}

.order-form-header { padding: 15rpx 25rpx; font-size: 14px; font-weight: bold; }
.order-form-box { padding: 15rpx 25rpx; }

.order-bottom { position: fixed; bottom: 0; left: 0; right: 0; border-top: #ccc 1px solid; padding-top: 15rpx; padding-left: 300rpx; }
.order-bottom { background: #fff; display: flex; justify-content: flex-end; }
.order-bottom-button { border: #333 1px solid; border-radius: 25rpx; font-size:12px; padding: 5rpx 15rpx; margin-right: 20rpx; }
</style>
